<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <canvas id="myCanvas" width="1000" height="900"></canvas>
  <script>
    let c = document.getElementById('myCanvas')
    let ctx = c.getContext('2d')
    ctx.beginPath()
    // 设置颜色
    ctx.fillStyle = 'red'
    // 绘制矩形
    ctx.fillRect(0, 0, 100, 100)
    ctx.closePath()

    // 绘制线条
    ctx.beginPath()
    ctx.strokeStyle = "green"
    ctx.moveTo(400, 20) // 线条起始位置
    ctx.lineTo(200, 40)
    // 线条结束位置
    ctx.stroke() // 绘制线条
    ctx.closePath()

    // 绘制三角形
    ctx.beginPath()
    ctx.strokeStyle = 'pink'
    ctx.moveTo(120, 20) // 线条起始位置
    ctx.lineTo(120, 40) // 线条结束位置
    ctx.lineTo(150, 50) // 线条结束位置
    ctx.closePath()
    ctx.stroke() // 绘制线条

    // 绘制文字
    ctx.beginPath()
    ctx.font = "20px Arial"
    ctx.fillStyle = 'blue'
    ctx.fillText('Canvas文字绘制', 0, 120)

    // 绘制图像
    ctx.beginPath()
    var img = new Image()
    img.src = 'https://ask.qcloudimg.com/raw/yehe-fbd3d4418/8ooybm5lj4.png'
    img.onload = function onImageLoad() {
      ctx.drawImage(img, 0, 150);
    }

    // 绘制圆形
    ctx.beginPath()
    ctx.strokeStyle = 'green'
    ctx.arc(50, 350, 50, 0, 2 * Math.PI);
    ctx.stroke();

  </script>
</body>

</html>